<template>
    <!--
        ok：点击确定回调
        cancel：点击遮罩层或右上角叉或取消按钮的回调
    -->
    <j-modal
            :title="title"
            :width="width"
            :visible="visible"
            :switchFullscreen="true"
            @ok="handleOk"
            @cancel="handleCancel"
    >
        <div v-if="!showInfo">
            <h2 class="text-center">【{{customerName}}】废物管理台账</h2>
            <div style="text-align: right;margin-bottom:10px;" >
                <a-button type="primary" icon="printer" v-print="'#printTableList2'">打印</a-button>
                <a-button type="primary" icon="download" @click="openExcel" style="margin-left: 10px;">
                    导出Excel
                </a-button>
            </div>
            <a-table
                    ref="table"
                    size="middle"
                    rowKey="id"
                    :columns="columns"
                    :data-source="dataSource"
                    bordered
                    :pagination="false"
                    :loading="loading"
                    class="j-table-force-nowrap"
            >
                <template slot="imgSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;"></span>
                    <img v-else :src="getImgView(text)" height="25px" alt=""
                         style="width: auto;height: 50px;"/>
                </template>
            </a-table>

            <div v-show="false">
                <div id="printTableList2" >
                    <h2 style="text-align: center;font-weight: bold;">【{{customerName}}】废物管理台账</h2>
                    <h3 v-if="rangeTime.length">时间 ： {{rangeTime[0]}} 至 {{rangeTime[1]}}</h3>
                    <a-table
                            size="small"
                            bordered
                            rowKey="id"
                            :columns="columns"
                            :dataSource="dataSource"
                            :pagination="false"
                    >
                        <template slot="htmlSlot" slot-scope="text">
                            <div style="color: black !important;" v-html="text"></div>
                        </template>
                        <template slot="imgSlot" slot-scope="text">
                            <span v-if="!text" style="font-size: 12px;font-style: italic;"></span>
                            <img v-else :src="getImgView(text)" height="25px" alt=""
                                 style="width: auto;height: 50px;"/>
                        </template>

                    </a-table>
                </div>
            </div>
        </div>

        <div v-else>
            <div style="text-align: left;">
                <a-button type="link" icon="left" class='icon_goBack' @click='goBack'>返回上一层</a-button>
            </div>
            <h2 class="text-center">【{{customerName}}】废物管理台账详情</h2>
            <div style="text-align: right;margin-bottom:10px;" >
                <a-button type="primary" icon="printer" v-print="'#printTableList2'">打印</a-button>
                <a-button type="primary" icon="download" @click="openExcel2" style="margin-left: 10px;">
                    导出Excel
                </a-button>
            </div>
            <a-table
                    ref="table"
                    size="middle"
                    rowKey="id"
                    :columns="columns2"
                    :data-source="dataSource2"
                    bordered
                    :pagination="false"
                    :loading="loading"
                    class="j-table-force-nowrap"
            >
            </a-table>

            <div v-show="false">
                <div id="printTableList2" >
                    <h2 style="text-align: center;font-weight: bold;">【{{customerName}}】废物管理台账详情</h2>
                    <a-table
                            size="small"
                            bordered
                            rowKey="id"
                            :columns="columns2"
                            :dataSource="dataSource2"
                            :pagination="false"
                    >
                        <template slot="htmlSlot" slot-scope="text">
                            <div style="color: black !important;" v-html="text"></div>
                        </template>
                    </a-table>
                </div>
            </div>
        </div>
    </j-modal>


</template>

<script>
  import * as customer from '@/api/customer'
  import moment from 'moment'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'
  import { downloadFile, getAction, putAction } from '@/api/manage'

  export default {
    mixins: [JeecgListMixin, mixinDevice],
    data() {
      return {
        title: '废物台账列表',
        width: '80%',
        visible: false,
        disableSubmit: false,
        dataSource : [],
        columns:[],
        customerName:'',
        loading: false,
        url: {
            exportXlsUrlOkForImages: '/hc/hcRecycleBagcode/exportInspectionByDay',
            exportXlsUrlOkForImages2: '/hc/hcRecycleBagcode/exportSubmitDetails'
        },
        // 导出查询参数
          queryParam: {},
          wasteTypeList:[],
          wasteId:[],
          showInfo: false, //判断是否显示第二层表格数据
          dataSource2 : [],
          rangeTime:[],
          queryParam2: {},

      }
    },
    methods: {
      async show(cus,customerNumber,customerName,wasteId,wasteTypeList) {
        this.visible = true;
        this.customerName = customerName;
        this.wasteId = wasteId;
        this.wasteTypeList = wasteTypeList;
        if(cus.creatTimeBegin){
           this.rangeTime[0] = cus.creatTimeBegin
        }
        if(cus.creatTimeEnd){
            this.rangeTime[1] = cus.creatTimeEnd
        }
        if (cus) {
          let params = {
            creatTimeBegin : cus.creatTimeBegin,
            creatTimeEnd : cus.creatTimeEnd,
            customerNumber: customerNumber, // 机构编码
            wasteId: this.wasteId.join(','),
          };
          this.queryParam = params;
          // let res = await customer.getEveryDayStatisticV2(params);
          let res = await customer.submitInspectionByDay(params);
          if (res) {
            this.dataSource = res.records || []
            let sumDate = res.sumList || []
            this.dataSource.push({
              colSpan: 3,
              maps:sumDate
            })
          }
        }
        await this.setColumns()
      },

      // 设置表格头部信息
      setColumns() {
        let data = this.wasteTypeList
        let cols = []
        data.forEach((item, index) => {
              if (item.wasteTypeName) {
                  console.log('item',item);
                  let child = [];
                  (item['children'] || []).forEach((val, i) => {
                      let info = this.wasteId.find(v => v === val.id)
                      if (info) {
                          child.push({
                              title: val.wasteTypeName,
                              dataIndex: 'id',
                              key: `${index}-${i}`,
                              children: [
                                  {
                                      title: '袋数',
                                      align: 'center',
                                      dataIndex: 'id',
                                      key: `${index}-${i}-1-1`,
                                      customRender: function(vv, waste, index) {
                                          let info = (waste['maps']).find((v) => v.wasteType === val.id)
                                          if (info) {
                                              vv = info.bagNum
                                          }
                                          const obj = {
                                              children: vv || '',
                                              attrs: {}
                                          }
                                          if (waste.colSpan) {
                                              obj.children =
                                          <div style="color:red;font-weight:600;">{vv || 0} </div>
                                              obj.attrs.colSpan = 1
                                          }
                                          return obj
                                      }
                                  },
                                  {
                                      title: `重量${val.priceUnit ? `(${val.priceUnit})` : ''}`,
                                      align: 'center',
                                      dataIndex: 'id',
                                      key: `${index}-${i}-1-2`,
                                      customRender: function(vv, waste, index) {
                                          let info = (waste['maps']).find((v) => v.wasteType === val.id)
                                          if (info) {
                                              vv = info.wasteOriginalValue
                                          }
                                          const obj = {
                                              children: vv || '',
                                              attrs: {}
                                          }
                                          if (waste.colSpan) {
                                              obj.children =
                                          <div style="color:red;font-weight:600;">{vv || 0} kg</div>
                                              obj.attrs.colSpan = 1
                                          }
                                          return obj
                                      }
                                  }
                              ]
                          })
                      }
                  })
                  if (child.length) {
                      let obj = {
                          title: item.wasteTypeName,
                          dataIndex: 'id',
                          key: `${index}`,
                          children: child
                      }
                      cols.push(obj)
                  }
              }
          })
        this.columns = [
          {
            title: '序号',
            dataIndex: 'id',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            scopedSlots: { customRender: 'htmlSlot' },
            customRender: (text, row, index) => {
              const obj = {
                children: parseInt(index) + 1,
                attrs: {}
              }
              if (row.colSpan) {
                obj.children = <div style="color:red;font-weight:600;">合计</div>
                // obj.attrs.colSpan = 2;
                obj.attrs.colSpan = row.colSpan
              }
              return obj
            }
          },
          {
            title: `日期`,
            dataIndex: 'days',
            key: `days`,
            width: 100,
            align: 'center',
            customRender: (value, row, index) => {
              const formatterTime = (val) =>{
                return val ? moment(val).format('yyyy-MM-DD') : ''
              };
              const obj = {
                // children:  formatterTime(value),
                children:  <span style="font-weight:600;color:#64EAFF;text-decoration:underline;cursor: pointer;"
                                 onclick = {()  => this.openDataInfo(row) }>
                                {formatterTime(value)}
                                </span>,
                attrs: {}
              }
              if (row.colSpan) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '部门/科室',
            align: 'center',
            dataIndex: 'customerDepartmentName',
            key: 'customerDepartmentName',
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.colSpan) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          ...cols,
          {
            title: `部门/科室签字`,
            dataIndex: 'customerDepartmentUrl',
            key: `customerDepartmentUrl`,
            width: 100,
            align: 'center',
            scopedSlots: { customRender: 'imgSlot' }
          }
        ];
          this.columns2 = [
              {
                  title: '序号',
                  dataIndex: 'id',
                  key: 'rowIndex',
                  width: 60,
                  align: 'center',
                  customRender: (text, row, index) => {
                      return parseInt(index) + 1
                  }
              },
              {
                  title: '部门/科室',
                  align: 'center',
                  dataIndex: 'customerDepartmentName',
                  key: 'customerDepartmentName',
              },
              {
                  title: '提交日期',
                  dataIndex: 'printDate',
                  key: 'printDate',
                  align: 'center',
              },
              {
                  title: '废物编码',
                  align: 'center',
                  dataIndex: 'recycleBagCode',
                  key: 'recycleBagCode',
              },
              {
                  title: '废物类型',
                  align: 'center',
                  dataIndex: 'wasteName',
                  key: 'wasteName',
              },
              {
                  title: `废物量`,
                  align: 'center',
                  dataIndex: 'wasteOriginalValue',
                  key: 'wasteOriginalValue',
                  scopedSlots: { customRender: 'htmlSlot' },
                  customRender: function(value, row, index) {
                      const obj = {
                          children: < span
                              style = 'font-weight:600;' > { value }
                              {
                                  row.priceUnit || ''
                              }
                              <
                              /span>,
                            attrs: {
                              }
                              }
                            return obj
                        }
              },

          ];
      },


        close() {
            this.$emit('close')
            this.visible = false
            this.showInfo = false;
        },
        handleOk() {
            this.close()
        },
        handleCancel() {
            this.close()
        },
        // 根据医院提交医废的日期来显示医院当日提交医废明细
        async openDataInfo(row) {
            if(row){
                this.showInfo = true;
                let params = {
                    creatTimeBegin : row.days,
                    creatTimeEnd : row.days,
                    customerDepartmentId : row.customerDepartmentId,
                    customerNumber : row.customerNumber,
                    wasteId: this.wasteId.join(','),
                }
                this.queryParam2 = params;
                let res = await customer.submitDetails(params);
                if (res) {
                    this.dataSource2 = res || []
                }
            }
            await this.setColumns()
        },
        // 返回上一层
        goBack() {
            this.showInfo = false;
        },

      // 导出数据
      openExcel() {
        let param = { ...this.queryParam }
        let name = `${this.customerName}医疗废物管理台账数据统计-${new Date().FormatDate()}.xls`
        downloadFile(this.url.exportXlsUrlOkForImages, name, param)
      },

      // 第二层导出
      openExcel2() {
          let param = { ...this.queryParam2 }
          let name = `${this.customerName}医疗废物管理台账数据详情-${new Date().FormatDate()}.xls`
          downloadFile(this.url.exportXlsUrlOkForImages2, name, param)
      }
    }
  }
</script>
<style scoped>
    .icon_goBack{
        font-size: 18px;
        letter-spacing: 6px;
    }
</style>
